<template>
<div id="box">
  <div class="row ">
    <div class="col-sm-12 col-md-12 ">
      <div class="thumbnail clearfix">
        <img :src="liste.large" alt="" class="pull-left tu">
        <div class="caption pull-left">
          <h3>{{list.name}}</h3>
          <p>{{list.name_en}}</p>
          <p>{{list.born_place}}</p>
          <p v-for="item in list.aka_en">{{item}}</p>
        </div>
      </div>
    </div>
  </div>

  <div class="row ">
    <div class="col-sm-12 col-md-12 ">
      <div class="thumbnail clearfix" v-for="item in list.works">
        <img :src="item.subject.images.large" alt="" class="pull-left tu1">
        <div class="caption pull-left">
          <h4>{{item.subject.title}}</h4>
          <p>{{item.subject.original_title}}</p>
          <span v-for="type in item.subject.genres">{{type}} / </span>
        </div>
      </div>
    </div>
  </div>

</div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      list: [],
      liste:{}
    }
  },
  mounted() {
    this.axios({
      url: "/api/v2/movie/celebrity/1054395",
      method: "get"
    }).then((res) => {
      this.list = res.data
      this.liste=this.list.avatars
      console.log(this.list.avatars)
    })
  }
}
</script>
<style  scoped>
.tu {
  max-height: 200px !important
}

.tu1 {
  max-height: 100px !important
}

.clearfix:after {
  display: block;
  content: '';
  clear: both;
}
</style>
